<template>
  <div class="security-left">
    <div class="security-l1">
      <category-title hasExport title="人员考勤统计" title-sub="attendance statistics"/>
      <div class="person-stat-box">
        <person-stat :data="L1data"/>
      </div>
    </div>
    <div class="security-l2">
      <category-title title="人流统计" title-sub="Personnel flow statistics"/>
      <CategoryInfo :col="L2Info" :datas="peopleChart"></CategoryInfo>
      <div ref="L2Chart" class="chart"/>
    </div>
    <div class="security-l3">
      <category-title filter title="人员考勤报告" title-sub="Personnel attendance report"/>
      <div class="timeline-box">
        <simple-table  :columns="l3ColumnData" :datas="L3Data" @next-page="l3ScrollEvent"/>
      </div>
    </div>
  </div>
  <div class="security-middle">
    <div :class="{show:ejectBtn}" class="middleInfo">
      <div :class="{ active: ejectBtn }" class="ejectBtn flex-center" @click="ejectBtn = !ejectBtn">
        <DownOutlined v-if="ejectBtn"/>
        <UpOutlined v-else/>
      </div>
      <div class="title">
        <category-title
            :title="middleCheck?'车辆进出信息':'人员进出信息'"
            title-sub="Information on entry and exit of people and vehicles"
        />
      </div>
      <div class="time">
        <a-range-picker v-model:value="middleConfig.params.sj" :bordered="false" :locale="locale"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" @change="middleTimeChange"
        />
      </div>
      <div class="qie" @click="middleChange">
        切换
      </div>
      <div class="export" @click="exportChange">
        导出
      </div>
      <div class="middleList">
        <MiddleList ref="middleList" :datas="middleData" @scrollEvent="scrollEvent"></MiddleList>
      </div>
    </div>
  </div>
  <div class="security-right">
    <div class="security-r1">
      <category-title title="车辆车位监测"
                      title-sub="Vehicle parking"
      />
      <btn-filter :items="dateBtnItems" @change="(type) => r1Change(type+1)"/>
      <div class="progress-box">
        <progress-bar :datas="R1Data" :max="r1Max"/>
      </div>
    </div>
    <div class="security-r2">
      <category-title filter title="车辆类型统计" title-sub="Vehicle type statistics"/>
      <btn-filter :items="dateBtnItems" @change="(type) => getR2(type+1)"/>
      <div ref="R2Chart" class="chart"/>
    </div>
    <div class="security-r3">
      <category-title filter title="车流统计" title-sub="Traffic flow statistics"/>
      <TrafficStream></TrafficStream>
    </div>
  </div>
</template>

<script setup>
import {inject, onBeforeUnmount, onMounted, reactive, ref} from "vue";
import {dateBtnItems, l3ColumnData} from "./data.js";
import {createChartNewR2, L2Info, R2Col} from "./chart-l2.js";
import ProgressBar from "@/components/customs/progress-bar/index.vue";
import CategoryInfo from "@/components/customs/category-info/index";
import {DownOutlined, UpOutlined} from "@ant-design/icons-vue";
import CategoryTitle from "@/components/customs/category-title/index.vue";
import SimpleTable from "@/components/customs/simple-table/index.vue";
import {handleChart} from "@/pages/overview/data";
import PersonStat from "./components/person-stat/index.vue";
import {CarRecord, ClcwApi, CllxApi, KaoApi, MjApi, PeopleChartApi, RenKaoApi} from "@/common/customs/overview";
import {createChartR2} from "@/pages/overview/chart-r2";
import BtnFilter from "@/components/customs/btn-filter/index.vue";
import TrafficStream from "@/components/customs/traffic-stream/index.vue";
import MiddleList from "./components/middleList/index.vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import {Cldc, Mjdc} from "@/common/customs/security";
import {downloadFile, nextPageFun, scrollNextEvent} from "@/common/tool";

const onPageChange = inject("pageChange");
const isLoading = inject("isLoading");
const smartObject = inject("smartObject");
const L2Chart = ref(null);
const R2Chart = ref(null);
const time = ref(null);
const midTime = ref(null);
const middleList = ref(null);
const middleData = ref([]);
const middleCheck = ref(false);
const ejectBtn = ref(false);
const L3Data = ref([]);
const R1Data = ref([]);
const R1Type = ref(0);
const R2Type = ref(0);
const r1Max = ref(0);
const L1data = ref([]);
const peopleChart = reactive({
  chartData: [],
  dqrll: 0,
  dqygs: 0
});
const L3Config = reactive({
  total: 0,
  isEnd: false,
  loading: false,
  params: {
    page: 1,
    page_size: 20
  }
});
const cameraBox = ref();
const middleConfig = reactive({
  total: 0,
  isEnd: false,
  loading: false,
  params: {
    page: 1,
    page_size: 60,
    sj: []
  }
});

const getL1 = async () => {
  const api = new KaoApi();
  await api.send();
  const {data} = await api.getDatas();
  L1data.value = data;
};

const getPeopleChart = async () => {
  const api = new PeopleChartApi();
  await api.send();
  const {data, xw, dqygs, dqrll} = await api.getDatas();
  peopleChart.dqrll = dqrll;
  peopleChart.dqygs = dqygs;
  peopleChart.chartData = handleChart({data, xw}, ["员工人流量", "访客人流量"]);
  createChartR2(L2Chart.value, peopleChart.chartData);
};

const r1Change = async (type) => {
  if (type) {
    R1Type.value = type;
  }
  const api = new ClcwApi();
  api.params({type});
  await api.send();
  const {data} = await api.getDatas();
  R1Data.value = [
    {
      title: "园区内车辆",
      value: data.xncl,
    },
    {
      title: "园区外车辆",
      value: data.xwcl,
    },
  ];
  if (R1Type.value === 1) {
    R1Data.value.push({
      title: "总车位",
      value: data.zcw,
    });
    R1Data.value.push({
      title: "剩余车位",
      value: data.sykw,
    });
  }
  r1Max.value = data.zcw || 100;
};

const getL3 = async (next = false) => {
  const api = new RenKaoApi();
  const dataBase = (data) =>{
    data.data = data.data.map(i => {
      return {
        ...i,
        typeName: ["", "正常", "迟到", "缺勤"][i.type],
      };
    });
    return data
  }
  await nextPageFun(api, L3Data, next, L3Config, dataBase);
  // api.params({
  //   page: 1,
  //   page_size: 30,
  // });
  // await api.send();
  // const {data} = await api.getDatas();
  // L3Data.value = data.data.map(i => {
  //   return {
  //     ...i,
  //     typeName: ["", "正常", "迟到", "缺勤"][i.type],
  //   };
  // });
};
const l3ScrollEvent = (event) => {
  sx()
  scrollNextEvent(event, L3Config,() => getL3(true));
};
const getR2 = async (type) => {
  if (type) {
    R2Type.value = type;
  }
  const api = new CllxApi();
  api.params({type:R2Type.value});
  await api.send();
  const {data} = await api.getDatas();
  let arr = R2Col.map(item => {
    return {
      type: item.type,
      value: data[item.key]
    };
  });
  createChartNewR2(R2Chart.value, arr);
};
const getMiddle = async (next = false) => {
  sxMid();
  if (!next) {
    middleData.value = [];
    middleConfig.params.page = 1;
  }
  let arr = [];
  console.log(middleConfig.params);
  if (middleCheck.value) {
    const api = new CarRecord();
    api.params(middleConfig.params);
    await api.send();
    const {data} = await api.getDatas();
    if (data.data) {
      middleConfig.isEnd = middleConfig.params.page >= data.last_page;
      arr = data.data.map((item) => {
        return {
          img: item.ztimg,
          title: item.parkName,
          name: item.plateNo,
          info: item.vehicleOut ? "出场" : "入场",
          time: item.crossTime,
        };
      });
    }
  } else {
    const api = new MjApi();
    api.params(middleConfig.params);
    await api.send();
    const {data} = await api.getDatas();
    if (data.data) {
      middleConfig.isEnd = middleConfig.params.page >= data.last_page;
      arr = data.data.map((item) => {
        return {
          img: item.facePicUrl,
          title: item.doorName,
          name: item.personName,
          info: item.doorName.includes('门禁2') ? "出场" : "入场",
          time: item.eventTime,
        };
      });
    }
  }
  if (next) {
    middleData.value = middleData.value.concat(arr);
    console.log(arr, middleData.value);
  } else {
    middleList.value.toTop();
    middleData.value = arr;
  }
  middleConfig.loading = false;

};
const middleChange = () => {
  middleCheck.value = !middleCheck.value;
  middleList.value.toTop();

  getMiddle();
};

const exportChange = async () => {
  let api = null;
  if (middleCheck.value) {
    api = new Cldc();
  } else {
    api = new Mjdc();
  }
  api.params({
    sj: middleConfig.params.sj
  });
  api.responseType("blob");
  await api.send();
  const data = await api.getDatas();
  const blob = new Blob([data], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  });
  downloadFile(blob, middleCheck.value ? "车辆导出" : "人员导出");
};

const middleTimeChange = () => {
  getMiddle();
};
const scrollEvent = () => {
  if (!middleConfig.loading && !middleConfig.isEnd) {
    middleConfig.loading = true;
    middleConfig.params.page++;
    getMiddle(true);
  }
};
const sx = () => {
  if (time.value) {
    clearInterval(time.value);
  }
  time.value = setInterval(() => {
    getL1();
    getPeopleChart();
    getL3();
    r1Change();
    getMiddle();
    getR2();
  }, 60000);
};
const sxMid = () => {
  if (midTime.value) {
    clearInterval(midTime.value);
  }
  midTime.value = setInterval(() => {
    getMiddle();
  }, 60000);
};
onMounted(() => {
  getL1();
  getPeopleChart();
  getL3();
  r1Change(1);
  getMiddle();
  getR2(1);
  sx();
});
onBeforeUnmount(() => {
  if (time.value) {
    clearInterval(time.value);
  }
  if (midTime.value) {
    clearInterval(midTime.value);
  }
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
